<template>
  <div>
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动封面" prop="banner">
        <el-upload class="avatar-uploader" :action="this.$upload" :on-error="uploadFileError" :on-success="uploadFileSuccess" :show-file-list="false">
          <img v-if="ruleForm.banner != ''" :src="ruleForm.banner" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="ruleForm.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="onSubmit('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: ['ruleForm'],
  created() {},
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.ruleForm)
        } else {
          this.$message.warning('请按表单要求填写完整！！！')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    //图片上传成功
    uploadFileSuccess(res) {
      this.ruleForm.banner = res.data.url
      this.$emit('updateProps', this.ruleForm)
    },
    //图片上传失败
    uploadFileError(err) {
      console.log(err)
    },
  },
}
</script>

<style lang="less" scoped>
</style>